<script setup lang="ts" name="DictType">
import {defineAsyncComponent, onMounted, reactive, ref, toRefs, watch} from "vue";
import { notify } from "@/utils/element";
import { getDictDataList, getDictOptionselect,deleteDataById } from "@/api/system/dict";
import { useRoute, useRouter } from "vue-router";
const MenuEdit = defineAsyncComponent(() => import('@/views/system/dict/components/dictType-edit.vue'));

const route = useRoute()
const router = useRouter()
watch(route, (to, from) => {
  console.log('to', to);

  router.go(0)
})
onMounted (() => {
    getPostData()
    loadPostOptions()
})

async function getPostData(){
  console.log(route.query.dictType);
  const { pageNum, pageSize } = state.page;
            //合并必须传递的查询条件
  const { data } = await getDictDataList(state.query, pageNum, pageSize);

  state.tableList = data;
  console.log('tableList', state.tableList);
}

 //点击查询
    function handleQuery() {
        //将页码设置为第一页
        state.page.pageNum = 1;
        getPostData()
    }

    const dictTypeOptions = ref([]);
//加载字典类型下拉选项
    async function loadPostOptions() {
  try {
    loading.value = true;
    const { data } = await getDictOptionselect();
    if (data && data.length > 0) {
      dictTypeOptions.value = data.map((item: any) => ({
        value: item.dictType,
        label: item.dictName,
      }));
    } else {
      dictTypeOptions.value = [];
    }
  } catch (error) {
  } finally {
    loading.value = false;
  }
}

// right 内容开始
const state = reactive({
  loading: false,
  page: {
    pageNum: 1,
    pageSize: 20,
    total: 0,
  } as PageType,
  query: {
    dictType: route.query.dictType,
  } as unknown as SysDictDataQuery,
  dataTree: [],
  tableList: [] as SysDictDataType [],
});

async function getDictType(dictId: string){
  console.log('getDictType', dictId);
}

function handleAdd(){
  editRef.value.open('add', '新增', {dictType: route.query.dictType});
}
function handleEdit(row: SysPostQuery){
  //console.log('handleEdit', row)
  editRef.value.open('edit','编辑',row);
}
async function handleDelete(id: string){
  console.log('handleDelete',id);
  try {
    state.loading = true;
    await deleteDataById(id);
    //提示成功
    notify('删除成功！', {type: 'success'});
    //刷新列表
    getPostData()
  } catch (error) {
  } finally {
    state.loading = false;
  }

}
const { loading, page, query, tableList } = { ...toRefs(state)};
const tableListRef = ref();
const editRef = ref();
</script>

<template>
  <div class="layout-padding">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card shadow="always">
          <el-form inline :model="query">
            <el-form-item label="字典名称" >
              <el-select-v2
              v-model="query.dictType"
              :options="dictTypeOptions"
              placeholder="请选择字典名称"
              style="width: 200px"
              clearable
            />
            </el-form-item>
            <el-form-item>
              <el-button @click="handleQuery()" icon="ele-Search" type="primary">查询</el-button>
              <el-button @click="handleAdd()" icon="ele-Plus" type="success">新增字典</el-button>
            </el-form-item>
          </el-form>

          <el-table
            class="w100"
            ref="tableListRef"
            v-loading="loading"
            :data="tableList"
            row-key="menuId"
            border
            stripe
          >
          <el-table-column type="index" label="字典编号" align="center" width="100px"/>
            <el-table-column prop="dictLabel" label="字典标签" header-align="center" align="center">
                <template #default="{row}">
                    <span class="ml10">{{ row.dictLabel }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="dictValue" label="字典键值" align="center"></el-table-column>
            <el-table-column prop="type" label="状态" align="center">
              <template #default="{row}">
                    <el-tag effect="plain" :type="row.status == '0' ? 'primary' :  'warning'">{{ row.status == '0' ? '正常' : '停用' }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" header-align="center" align="center" show-overflow-tooltip/>
            <el-table-column prop="remark" label="备注" header-align="center" align="center" show-overflow-tooltip/>
            <el-table-column label="操作" align="center" width="240px">
              <template #default="{row}">
                <el-button @click.stop="handleEdit(row)" icon="ele-Edit" type="warning" link>修改</el-button>
                <el-popconfirm @confirm="handleDelete(row.dictCode)" width="auto" :title="`确定永久删除【${row.dictLabel}】吗?`">
                  <template #reference>
                    <el-button @click.stop icon="ele-Delete" type="danger" link>删除</el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <!-- 新增、编辑弹出组件 -->
    <MenuEdit ref="editRef" @refresh="getPostData"/>
  </div>
</template>

<style scoped>

</style>
